<template>
	<view class="expert-verify">
		<!-- 对话框 -->
		<uni-popup ref="popupDialogNotice" type="dialog" @change="change">
			<uni-popup-dialog class="dialogNotice" style="z-index: 999;" type="success" title="提示" content="请先完善个人信息"
			 :before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<view class="personal-info-top">
			<view class="personal-info-top-contain">
				<view class="personal-info-top-contain-pic">
					<image v-if="userInfoData.accountHead" class="top-bar-info-img" :src="userInfoData.accountHead" mode=""></image>
					<image v-else src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/nologinaccount.png" class="top-bar-info-img" mode=""></image>
				</view>
				<view class="personal-info-top-contain-info">
					<view class="personal-info-top-contain-title">
						{{titleName}}
					</view>
					<view class="personal-info-top-contain-account">
						登录账号：{{userInfoData.phoneNumber}}
					</view>
				</view>
			</view>
		</view>
		<view class="personal-info-base">
			<view class="personal-info-base-title">
				<view class="person-left-ver">

				</view>
				<view class="person-info-base-tip">
					经纪人信息
				</view>
			</view>
		</view>
		<view class="evan-form-show">
			<evan-form :hide-required-asterisk="hideRequiredAsterisk" ref="form" :model="info">
				<evan-form-item label="关注行业" prop="searchArea">
					<view :class="info.searchArea==='请选择'?'unSelect searchText':'searchText'" @click="openPop">{{info.searchArea}}</view>
				</evan-form-item>
				<evan-form-item label="技术领域" prop="TecArca">
					<view :class="info.TecArca==='请选择'?'unSelect searchText':'searchText'" @click="openAreaPop">{{info.TecArca}}</view>
				</evan-form-item>
				<view class="expert">
					<view class="expert-title star">申请描述</view>
					<view class="p-20">
						<textarea class="" placeholder-class="expert-p20" v-if="isShowSubmit" :placeholder="isShow?'请用30-100字描述您的优势,比如您的从业经验、之前的相似经历等':''"
						 min-height="30" maxlength="100" v-model="desc" />
						</view>
					</view>
					
				<view class="expert">
					<view class="expert-title star">上传形象照</view>
					<view class="expert-text" v-if="!imgSrc">
						<image  @click="uploadImage" class="expert-upload" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/verfy-img1.png"></image>
						<view class="text">个人帐号请上传彩色清晰本身照机构帐号请上传机构宣传照</view>
					</view>
					<view v-else class="expert-upload expert-text">
						<image @click="uploadImage" mode="aspectFit" :src="imgSrc" ></image>
						<view class="text">个人帐号请上传彩色清晰本身照机构帐号请上传机构宣传照</view>
					</view>
				</view>
				<view class="session">
					<view class="session-title star">
						实名认证
					</view>
					<view class="session-image">
						<view>
							<image @click="uploadPosImage" v-if="!positiveImg"  src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/verfy-img3.png"></image>
							<image @click="uploadPosImage" mode="aspectFit" :src="positiveImg" ></image>
						</view>
						<view>
							<image @click="uploadBackImage" v-if="!backImg" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/verfy-img2.png"></image>
							<image @click="uploadBackImage" mode="aspectFit" :src="backImg" ></image>
						</view>
					</view>
					<view class="session-text">
						个人上传本人身份证件照片，机构上传法人证件照片
					</view>
				</view>
			</evan-form>
			
		</view>
		<view class="info">
			<checkbox-group @change="handleCheckChange">
				<checkbox value="cb" :value="'1'" :checked="isChecked"  color="#008BFF" style="transform:scale(0.7)" />希望官网展示我的信息
			</checkbox-group>
		</view>
		<!-- 提交按钮 -->
		<view class="verify" v-show="isShowSubmit">
			<button @click="toVerify">提交认证</button>
		</view>
		<uni-popup :maskClick="false" ref="popup" type="bottom" :scrollWin='true'>
			<view class="popup-content">
			
				<view class="popup-title">
					<view class="footer-cancel" @click="resetTechField">
						重置
					</view>
					<view class="title">
						关注行业 <text style='color:#BFBFBF;font-size:26rpx;font-weight: normal;'>(限选5个)</text>
					</view>
					<view class="footer-ok" @click="handleSure">
						确认
					</view>
					
				</view>
				<view class="tech-field-panel" >
					<view v-for="(c, index) in researchFields" :key="index">
						<view  v-bind:class="[c.selected? 'tech-item' : 'tech-item-normal']"   @click="selectSearchField(index)">
							<view  v-bind:class="[c.selected? 'category-item-title' : 'category-item-title-normal']">
								{{c.researchName}} 
							</view>
							<image v-if="c.selected" class="gouxuan" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/public/gouxuan.png" mode=""></mage>
						</view>
					</view>
					
				</view>
			</view>
		</uni-popup>
		<uni-popup :maskClick="false" ref="tecPopup" type="bottom" :scrollWin='true'>
			<view class="popup-content">
				<view class="popup-title">
					<view class="footer-cancel" @click="resetAreaField">
						重置
					</view>
					<view class="title">
						技术领域 <text style='color:#BFBFBF;font-size:26rpx;font-weight: normal;'>(限选5个)</text>
					</view>
					<view class="footer-ok" @click="handleAreaSure">
						确认
					</view>
				</view>
				<view class="tech-field-panel-menu" >
					<view class="l">
						<view class="item" v-for="(item,index) in tecArea" :key='index' :class="pop_open_menu==index?'active':''" @click="choisePopmenu(index)">
							{{item.value}}
							<icon v-if="item.checked||item.checked>0" type="success_no_circle" size="11" color='#008BFF'/>
						</view>
					</view>
					<view class="r">
						<view v-for="(item,index) in tecArea[pop_open_menu].children" :key="index" @click="choisePopitem(index,item)">
							<view class="item">
								{{item.value}}
								<icon v-if="item.checked" type="success_no_circle" size="11" color='#008BFF'/>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import EvanForm from '@/components/evan-form/evan-form.vue'
	import utils from '@/components/evan-form/utils.js'
	import {mapState,mapMutations} from 'vuex'
	import sunUiUpimg from '@/components/sunui-upimg/sunui-upimg.vue';
	import EvanFormItem from '@/components/evan-form/evan-form-item.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import { permissionJudge } from "@/utils/authority.js"
	export default {
		components: {
			EvanForm,
			uniPopup,
			sunUiUpimg,
			EvanFormItem,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			 const currentDate = this.getDate({
			            format: true
			  })
			return {
				isShow:false,
				scrollTop:0,
				old: {
				       scrollTop: 0
				},
				isAdd:null,
				titleName:'',
				userInfoData:{},
				showPublic:1,
				desc:'',
				homeChecked:0,
				isChecked:true,
				headPortrait:'',
				posPortrait:'',
				backPortrait:'',
				isShowSubmit:true,
				imgSrc:'',
				positiveImg:'',
				backImg:'',
				photoFormData:{
					model:'publish'
				},
				
				imageList: [],
				category: 'image',
				date: currentDate,
				hideRequiredAsterisk: false,
				researchFields:[],
				tecArea:[],
				sexes: [{
						name: '男',
						value: 'man'
					},
					{
						name: '女',
						value: 'woman'
					}
				],
				// 表单的内容必须初始化
				searchArea:[],
				TecArca:[],
				info: {
					searchArea:'请选择',
					TecArca:'请选择',
					research:'',
					desc:'',
					disSearchData:'请选择'
				},
				rules: {
					disSearchData: {
						required: true,
						message: '请选择研究方向'
					},
					TecArca: {
						required: true,
						message: '请选择技术领域'
					},
					searchArea: {
						required: true,
						message: '请选择研究领域'
					},
					name: {
						required: true,
						message: '请输入姓名'
					},
					email: [{
						required: true,
						message: '请输入邮箱'
					}, {
						type: 'email',
						message: '邮箱格式不正确'
					}],
					desc: [{
							required: true,
							message: '请输入简介'
						},
						{
							min: 10,
							max: 30,
							message: '简介必须在10到30个字之间'
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号'
						},
						{
							validator: (rule, value, callback) => {
								// 注意这里如果用的是methods里的isMobilePhone将不生效
								if (this.$utils.isMobilePhone(value)) {
									callback()
								} else {
									callback(new Error('手机号格式不正确'))
								}
							}
						},
						// 或者这样也是可以的
						// {
						// 	validator: this.isMobile
						// }
					],
					sex: {
						required: true,
						message: '请选择性别'
					},
					id:'',
					
				},
				pop_open_menu : 0 ,
			}
		},
		mounted() {
			// 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form
			this.$refs.form.setRules(this.rules)
		},
		onLoad() {
			// this.loadIsPerfetInfo();
			this.loadAgentVerify();
            this.loadMechState()			
			this.userInfoData = uni.getStorageSync('userInfo');
			this.date = this.userInfoData.birthdate ? this.userInfoData.birthdate.split('T')[0] : '';
			let arr = [...this.userInfoData.phoneNumber];
			for (let i = 0; i < arr.length; i++) {
				if (i > 2 && i < 7) {
					arr[i] = "*"
				}
			}
			this.replacePhonNumber = arr.join('');
			if(this.userInfoData.realName){
				this.titleName = this.userInfoData.realName;
			}else{
				this.titleName = ('用户'+this.replacePhonNumber)
			}
			this.getSearchArea();
			this.getTecArea();
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        },
		    },
		methods: {
			//研究弹窗左侧菜单选取
			choisePopmenu(v){
				this.pop_open_menu = v
			},
			//研究弹窗项目选择
			choisePopitem(v,data){
				if(this.TecArca.length>=5&&!this.tecArea[this.pop_open_menu].children[v].checked){
					uni.showToast({
						title:'最多选择5项',
						icon:'none'
					})
					return
				}
				this.$set(this.tecArea[this.pop_open_menu].children[v], 'checked', !this.tecArea[this.pop_open_menu].children[v].checked)
				if(this.tecArea[this.pop_open_menu].children[v].checked){
					this.$set(this.tecArea[this.pop_open_menu], 'checked', this.tecArea[this.pop_open_menu].checked?this.tecArea[this.pop_open_menu].checked+1:1)
					this.TecArca.push({
						name:data.value,
						code:data.code						 
					})
				}else{
					this.$set(this.tecArea[this.pop_open_menu], 'checked', this.tecArea[this.pop_open_menu].checked-1)
					let index = this.TecArca.findIndex((v) => {
					    return v.code == data.code;
					})
					this.TecArca.splice(index,1)
				}
				
			},
			upper: function(e) {
			            console.log(e)
			        },
			        lower: function(e) {
			            console.log(e)
			        },
			        scroll: function(e) {
			            console.log(e)
			            this.old.scrollTop = e.detail.scrollTop
			        },
			/**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
			change(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			/**
			 * 对话框取消按钮
			 */
			//是否机构通过
			loadMechState(){
				this.$request.get({
					url:'user/selectMyComplete',
				}).then(res=>{
					console.log('机构状态',res)
					if(res.complete ===0){
						//个人信息未完善
						if(res.auditStatus ===null){
							this.$refs.popupDialogNotice.open();
							//机构正在申请中
						}else {
							this.isShow = true;
						    uni.showToast({
						    	title:'请先完成机构认证',
								icon:'none',
								success() {
								   setTimeout(()=>{
									 uni.navigateBack({})  
								   },2000)
								}
						    })
						}
						
					}else{
						this.isShow = true;
					}
					
				})
			},
			dialogClose(done) {
				uni.navigateBack()
				// 需要执行 done 才能关闭对话框
				done()
			},
			dialogConfirm(done) {
				uni.redirectTo({
					url:'/pagesB/personal-info/personal-info'
				})
				// 需要执行 done 才能关闭对话框
				done()
			},
			//获取经纪人信息
			loadAgentVerify(){
				this.$request.get({
					url:'agentInfo/selectDetailForCenter'
				}).then(res=>{
					console.log('经纪人信息',res)
					if(res===null){
						this.isAdd = true;
						return
					}
					this.isAdd = false;
					this.id = res.id;
					this.desc = res.applyNote;
					this.imgSrc = res.imagePhoto;
					this.positiveImg =  res.autPhotoFront;
					this.backImg =  res.autPhotoBack;
					
					this.headPortrait = res.imagePhoto;
					this.posPortrait = res.autPhotoFront;
					this.backPortrait = res.autPhotoBack;
					//技术领域
					if(res.skillAreaLabel.length===0){
					    	this.info.TecArca = '请选择'
					  }else if (res.skillAreaLabel.length===1){
					     this.info.TecArca = res.skillAreaLabel[0]
					 }	else if (res.skillAreaLabel.length > 1){
					 	this.info.TecArca = res.skillAreaLabel[0] + ',+'
					   }
					let skillArea = res.skillArea.split(',');
					  skillArea.map((item,index)=>{
							 this.TecArca.push({
								 code:item,
								 name:res.skillAreaLabel[index]
						   })
					  })
					 //关注行业
					 let researchAreaLabel = res.researchAreaLabel.split(',')
					 if(researchAreaLabel.length===0){
					     	this.info.searchArea = '请选择'
					   }else if (researchAreaLabel.length===1){
					      this.info.searchArea = researchAreaLabel[0]
					  }	else if (researchAreaLabel.length > 1){
					  	this.info.searchArea = researchAreaLabel[0] + ',+'
					    } 
						
					 let researchArea = res.researchArea.split(',');
					   researchArea.map((item,index)=>{
						   this.searchArea.push({
							   code:item
						   })
					   })
				})
			},
			//是否完善个人信息0未完善1已经完善
			loadIsPerfetInfo(){
			    this.$request.get({
					url:'user/selectMyCompleteForExpert',
				}).then(res=>{
					console.log(res,'个人信息')
					if(res===0){
						 this.$refs.popupDialogNotice.open();	
					}
				})
			},
			//经纪人认证详情
			getAgentDetails(){
				
			},
			//获取官网显示是否展示
			handleCheckChange(e){
				console.log(e.detail.value)
				if(e.detail.value.length===0){
					this.showPublic = 0;
				}else if(e.detail.value.length===1){
					this.showPublic = 1;
				}
			},
			//认证
			toVerify(){
				if(!permissionJudge('membercenter:agent:add')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				//参数校验
				if(this.searchArea.length===0){
					uni.showToast({
						title:'请选择关注行业',
						icon:'none'
					})
					return
				}
				if(this.TecArca.length===0){
					uni.showToast({
						title:'请选择技术领域',
						icon:'none'
					})
					return
				}
				if(this.desc===''||this.desc===null){
					uni.showToast({
						title:'请输入申请描述',
						icon:'none'
					})
					return
				}
				if(this.desc&&this.desc.length<30){
					uni.showToast({
						title:'申请描述最少30字',
						icon:'none'
					})
					return
				}
				if(this.headPortrait===''){
					uni.showToast({
						title:'请上传形象照',
						icon:'none'
					})
					return
				}
				if(this.posPortrait===''){
					uni.showToast({
						title:'请上传身份证正面照',
						icon:'none'
					})
					return
				}
				if(this.backPortrait===''){
					uni.showToast({
						title:'请上传身份证反面照',
						icon:'none'
					})
					return
				}
				let params = {};
				let that = this;
				console.log(this.TecArca)
				
				let researchArea = [];
				this.searchArea.map((item)=>{
				   researchArea.push(item.code) 
				})
				researchArea = researchArea.join(',')
				params.researchArea = researchArea
				
				let skillArea = [];
				this.TecArca.map((item)=>{
				   skillArea.push(item.code) 
				})
				skillArea = skillArea.join(',')
				params.skillArea = skillArea
				params.applyNote = this.desc
			    params.imagePhoto = this.headPortrait
                params.autPhotoFront = this.posPortrait
			    params.autPhotoBack = this.backPortrait
				params.showPublic = this.showPublic
				if(this.isAdd===true){
					this.addInfo(params)
				}else{
					this.updataInfo(params)
				}
			},
			//首次添加
			addInfo(params){
				this.$request.post({
					url:'agentInfo/add',
					data:params,
				
				}).then(res=>{
					uni.showToast({
						title:'提交成功',
						success() {
							setTimeout(()=>{
								uni.navigateBack({})
							},500)
						}
					})
					
				})
			},
			updataInfo(params){
				params.id = this.id;
				this.$request.post({
					url:'agentInfo/update',
					data:params,
				
				}).then(res=>{
					uni.showToast({
						title:'编辑成功',
						success() {
							setTimeout(()=>{
								uni.navigateBack({})
							},500)
						}
					})
				})
			},
			//上传反面图片
			uploadBackImage(){
				let that = this;
				try {
				    const userInfo = uni.getStorageSync('userInfo');
				    if (userInfo) {
				        console.log(userInfo);
				    }
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album'], //从相册选择
					    success: function (res) {
					        console.log(JSON.stringify(res.tempFilePaths));
							
							uni.uploadFile({
								url:that.$baseUrl +'upLoading',
								filePath:res.tempFilePaths[0],
								formData:{
									model:'publish'
								},
								name:'file',
								header:{
									token:userInfo.token
								},
								success:(e)=>{
									let res = JSON.parse(e.data);
									console.log('图片上传成功',res)
									if (res.ret){
										uni.showToast({
											title:'图片上传成功'
										})
										that.backPortrait = res.data
										that.backImg = that.$baseUrl + res.data
									}else{
										uni.showToast({
											title:res.errmsg,
											icon:'none'
										})
									}
								},
								fail:res=> {
									uni.showToast({
										title:'图片上传失败',
										icon:'none'
									})
									console.log(res);
								}
							})
					    },
						fail:res=> {
							console.log(res);
						}
					});
					
				} catch (e) {
				    // error
				}
			},
			//上传正面图片
			uploadPosImage(){
				let that = this;
				try {
				    const userInfo = uni.getStorageSync('userInfo');
				    if (userInfo) {
				        console.log(userInfo);
				    }
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album'], //从相册选择
					    success: function (res) {
					        console.log(JSON.stringify(res.tempFilePaths));
							
							uni.uploadFile({
								url:that.$baseUrl +'upLoading',
								filePath:res.tempFilePaths[0],
								formData:{
									model:'publish'
								},
								name:'file',
								header:{
									token:userInfo.token
								},
								success:(e)=>{
									let res = JSON.parse(e.data);
									console.log('图片上传成功',JSON.parse(e.data))
									if (res.ret){
										uni.showToast({
											title:'图片上传成功'
										})
										that.posPortrait = res.data
										that.positiveImg = that.$baseUrl + res.data
									}else{
										uni.showToast({
											title:res.errmsg,
											icon:'none'
										})
									}
								},
								fail:res=> {
									uni.showToast({
										title:'图片上传失败',
										icon:'none'
									})
									console.log(res);
								}
							})
					    },
						fail:res=> {
							console.log(res);
						}
					});
					
				} catch (e) {
				    // error
				}
			},
			uploadImage(){
				let that = this;
				try {
				    const userInfo = uni.getStorageSync('userInfo');
				    if (userInfo) {
				        console.log(userInfo);
				    }
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album'], //从相册选择
					    success: function (res) {
					        console.log(JSON.stringify(res.tempFilePaths));
							
							uni.uploadFile({
								url:that.$baseUrl +'upLoading',
								filePath:res.tempFilePaths[0],
								formData:{
									model:'publish'
								},
								name:'file',
								header:{
									token:userInfo.token
								},
								success:(e)=>{
									let res = JSON.parse(e.data);
									console.log('图片上传成功',JSON.parse(e.data))
									if (res.ret){
										uni.showToast({
											title:'图片上传成功'
										})
										that.headPortrait = res.data
										that.imgSrc = that.$baseUrl + res.data
									}else{
										uni.showToast({
											title:res.errmsg,
											icon:'none'
										})
									}
								},
								fail:res=> {
									uni.showToast({
										title:'图片上传失败',
										icon:'none'
									})
									console.log(res);
								}
							})
					    },
						fail:res=> {
							console.log(res);
						}
					});
					
				} catch (e) {
				    // error
				}
				
				
			},
			getImageInfo1(e) {
				console.log('图片返回1：', e)
			},
			//研究方向页面
			toSearchTabs(){
				uni.navigateTo({
					url:'/pagesB/research-direction/research-direction'
				})
			},
			//文件上传成功回调
			formSubmit(e){
			        this.$refs.upload.uploadFile(Object.assign(formData),function(resp){
			            if(resp.code == 200 ){
			
			            }else{
			
			            }
			        })
			},
			 bindDateChange: function(e) {
			            this.date = e.target.value
			 },
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
			//技术领域确定		
			handleAreaSure(){
				// this.TecArca = [];
				// for(var i =0;i<this.tecArea.length;i++){
				// 	if(this.tecArea[i].selected){
				// 		this.TecArca.push({
				// 			 name:this.tecArea[i].value,
				// 			 code:this.tecArea[i].code
				// 	 })
				// 	}
				// }
				if(this.TecArca.length===0){
					this.info.TecArca = '请选择'
				}else if (this.TecArca.length===1){
					this.info.TecArca = this.TecArca[0].name
				}	else if (this.TecArca.length > 1){
					this.info.TecArca = this.TecArca[0].name + ',+'
				}
				this.closeAreaPop();
			},
			//研究领域确定
			handleSure(){
				this.searchArea = [];
				for(var i =0;i<this.researchFields.length;i++){
					if(this.researchFields[i].selected){
						this.searchArea.push({
							 name:this.researchFields[i].researchName,
							 code:this.researchFields[i].code
					 })
					}
				}
				if(this.searchArea.length===0){
					this.info.searchArea = '请选择'
				}else if (this.searchArea.length===1){
					this.info.searchArea = this.searchArea[0].name
				}	else if (this.searchArea.length > 1){
					this.info.searchArea = this.searchArea[0].name + ',+'
				}
				this.closePop();	
			},
			//重置技术领域
			resetAreaField(){
				for(var i =0;i<this.tecArea.length;i++){
					this.$set(this.tecArea[i],'checked',false)
					for(let k of this.tecArea[i].children){
						k.checked = false
					}
				}
				this.TecArca = []
			},
			//重置技术项目领域
			resetTechField(){
				for(var i =0;i<this.researchFields.length;i++){
					this.$set(this.researchFields[i],'selected',false)
				}
			},
			//点击技术项目领域
			selectSearchField(index){
				const selectedResearchs = this.researchFields.filter(t=>t.selected === true);
				if(selectedResearchs.length >= 5){
				
					const currentSearch = this.researchFields[index];
					if(currentSearch.selected !== true){
						uni.showToast({
							title:'最多选择五个',
							icon:'none'
						})
						return;
					};
					
				}
			    this.$set(this.researchFields[index],'selected',this.researchFields[index].selected?false:true);
			},
			//点击技术项目领域
			selectAreaField(index){
				//检测  选中 的项目技术项目
				const selectedTechs = this.tecArea.filter(t=>t.selected === true);
				if(selectedTechs.length >= 5){
					const currentTech = this.tecArea[index];
					if(currentTech.selected === undefined){
						return;
					};
				};
			    this.$set(this.tecArea[index],'selected',this.tecArea[index].selected?false:true);
			},
			//获取关注行业
						getSearchArea(){
							this.$request.get({
								url:'manager/Research/selectAllResearch',
								data:{}
							}).then(res=>{
								this.researchFields = res;
								for(let k in this.researchFields){
									let index = this.searchArea.findIndex((v) => {
									    return v.code == this.researchFields[k].code;
									})
									if(index!=-1){
										this.$set(this.researchFields[k],'selected',true)
										
									}
								}
							})
						},
						//获取技术领域
						getTecArea(){
							this.$request.get({
								url:'dict/getTreeByType?type=skill_area',
								data:{}
							}).then(res=>{
								console.log('技术领域',res)
			//                let tecArea = [];
								// res.children.map((item,index)=>{
								// 	tecArea = tecArea.concat(item.children)
								// })
								this.tecArea = res.children
								for(let k of this.tecArea){
									for(let kk of k.children){
										let index = this.TecArca.findIndex((v) => {
										    return v.code == kk.code;
										})
										if(index!=-1){
											kk.checked = true
											if(k.checked){
												k.checked =k.checked+1
											}else{
												k.checked = 1
											}
										}
									}
								}
							})
						},
			closePop(){
				this.$refs.popup.close();
				this.isShowSubmit = true;
			},
			openPop(){
				this.$refs.popup.open();
				this.isShowSubmit = false;
			},
			closeAreaPop(){
				this.$refs.tecPopup.close();
				this.isShowSubmit = true;
			},
			openAreaPop(){
				this.$refs.tecPopup.open();
				this.isShowSubmit = false;
			},
			save() {
				this.$refs.form.validate((res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			utilsSave() {
				utils.validate(this.info, this.rules, (res, errors) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			validateSingle() {
				this.$refs.form.validateField('email', (res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			validateMultiple() {
				this.$refs.form.validateField(['email', 'phone'], (res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			hideReqired() {
				this.hideRequiredAsterisk = !this.hideRequiredAsterisk
			},
			isMobilePhone() {
				const reg = /^1\d{10}$/
				if (reg.test(value)) {
					return true
				}
				return false
			},
			isMobile(rule, value, callback) {
				if (this.$utils.isMobilePhone(value)) {
					callback()
				} else {
					callback(new Error('手机号格式不正确'))
				}
			},
			sexChange(e) {
				this.info.sex = e.detail.value
			}
		}
	}
</script>

<style scoped lang='scss'>
	.scroll-Y {
		height: 740upx;
	}
	.person-left-ver {
		width: 5upx;
		height: 32.5upx;
		background-color: #2A7DFA;
	}
	.person-info-base-tip {
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 21upx;
	}
	.personal-info-base {
		background-color: #FFFFFF;
	}
	.personal-info-base-title {
		display: flex;
		align-items: center;
		padding: 23upx 30upx;
		border-bottom: 1upx solid #DDDDDD;
	}
	.top-bar-info-img {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.personal-info-top-contain-pic {
		width: 144rpx;
		height: 144rpx;
		padding: 2rpx;
		background-color: #FFFFFF;
		border-radius: 50%;

	}
	.person-info-base-tip {
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 21upx;
	}
	.person-left-ver {
		width: 5upx;
		height: 32.5upx;
		background-color: #2A7DFA;
	}
	.personal-info-base {
		background-color: #FFFFFF;
	}
	.personal-info-base-title {
		display: flex;
		align-items: center;
		padding: 23upx 30upx;
		border-bottom: 1upx solid #DDDDDD;
	}
	.top-bar-info-img {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.personal-info-top-contain-info {
		margin-left: 34upx;
	}
	
	.personal-info-top-contain-title {
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
	}
	
	.personal-info-top-contain-account {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}
	.personal-info-top-contain {
		display: flex;
		align-items: center;
	}
	.personal-info-top {
		width: 100%;
		height: 273upx;
		background-image: url("https://www.innovationgloble.com/wxs/img/wx/info-banner3.png");
		background-size: 100%;
		position: relative;
		padding: 66upx 47upx;
	}
	.expert-p20 {
		font-size:28upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(197,196,196,1);
		line-height:46upx;
		z-index: -1;
	}
	.p-20 {
		background:rgba(250,250,250,1);
		width: 100%;
		box-sizing: border-box;
		padding: 18upx 32upx;
		z-index: 1;
		height: 150px;

	}
	.star {
		position: relative;
		&::before{
			content: '*';
			color: #F56C6C;
			width: 30rpx;
			position: absolute;
			display: inline-block;
			left: -24upx;
		}
	}
	
	.expert {
		padding: 0 0 26upx 26upx;
	}
	.expert-upload {
		width: 158upx;
		height: 204upx;
		position: relative;
		image {
			width: 158upx;
			height: 204upx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.unSelect{
		color: #808080!important;
	}
	.searchText {
		font-size: 28upx;
		color: #333;
		text-align: right;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		height: 60upx;
	}
	.expert {
		border-bottom: 2upx solid #F5F5F5;
		padding-bottom: 34upx;
		.expert-title {
			color: #666;
			line-height: 82upx;
			padding: 4upx 0upx;
		}
	}
	.uni-input {
		font-size: 28rpx;
		color: #333;
	}
	.footer-btns{
		display: flex;
		width: 100%;
		height: 98upx;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	

	.gouxuan{
		position: absolute;
		right: 0upx;
		bottom: 0upx;
		width: 40upx;
		height: 40upx;
	}
	.category-item-title-normal{
		font-size: 28upx;
		color: #48526B;
		text-align: center;
		white-space: pre-wrap;
		padding: 0 12upx;
	}
	.category-item-title{
		font-size: 28upx;
		color: #268CFF;
		text-align: center;
		white-space: pre-wrap;
		padding: 0 12upx;
	}
	
	.tech-item-normal{
		width: 212upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 20upx;
			
		box-shadow: 0 0 24px 0 rgba(56,73,184,0.08);
		border-radius: 8upx;
		background-color: #F5F5F5;
	}
	
	.tech-item{
		width: 212upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 20upx;
		box-shadow: 0 0 24px 0 rgba(56,73,184,0.08);
		border-radius: 8upx;
		background-color: #E1F2FE;
	}
.popup-content{
	width: 100%;
	height: 918upx;
	display: flex;
	flex-direction: column;
	border-radius: 20upx 20upx 0 0 ;
	overflow: hidden;
	z-index: 99999;
	padding-bottom: 100upx;
	margin-bottom:-100upx;
	background:#fff;
}

.popup-title{
	display: flex;
	
	text-align: center;
	background-color: #FFFFFF;
	box-sizing: border-box;
	height: 114upx;
	align-items: center;
	border: 2upx solid #F7F7F7;
}
.popup-title .footer-cancel{
	display: flex;
	font-size: 32upx;
	color: #333;
	padding-left: 34upx;
}
.popup-title .footer-ok{
	display: flex;
	font-size: 32upx;
	color: #333;
	padding-right: 34upx;
}
.popup-title .title{
	flex: 1;
	font-size: 34upx;
	color: #2B3754;
	font-weight: bold;
}
.tech-field-panel{
	flex: 1;
	overflow:scroll;
	background-color: #FFFFFF;
	padding: 0 20upx 20upx 20upx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.tech-field-panel-menu{
	flex: 1;
	overflow:scroll;
	background-color: #FFFFFF;
	 
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.tech-field-panel-menu .l{
	position: relative;
	width:268upx;
	height:100%;
	overflow: scroll;
	background:rgba(249,249,249,1);
}
 .tech-field-panel-menu .l .item{
	 font-size: 28upx;
	 color: #757575;
	 width:100%;
	 padding: 0 70upx 0 30upx ;
	 height:96upx;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 line-height: 36upx;
 }
  .tech-field-panel-menu .l .item icon{
	position: absolute;
	right: 22upx;
	display: flex;
	align-items: center;
  }
 .tech-field-panel-menu .l .item.active{
	 background: #fff;
	 color: #196DEC;
	 border-left:8upx solid #008BFF;
	  padding: 0 70upx 0 22upx ;
 }

.tech-field-panel-menu .r{
	flex: 1;
	margin-left: 24upx;
	position: relative;
	height:100%;
	overflow: scroll;
}
.tech-field-panel-menu .r .item{
	height: 96upx;
	border-bottom: 1upx solid #F2F2F2;
	padding-right: 90upx;
	display: flex;
	align-items: center;
}
  .tech-field-panel-menu .r .item icon{
	position: absolute;
	right: 42upx;
	display: flex;
	align-items: center;
  }

.tech-field-desc{
	color: #999999;
	font-size: 26upx;
}
	.info {
		margin-top: 16upx;
		background-color: #FFFFFF;
		line-height: 116upx;
		padding: 0 39upx;
	}
	.evan-form-show {
		padding: 0 30rpx;
		background-color: #fff;
	    
		.form-input {
			font-size: 28rpx;
			color: #333;
			text-align: right;
			width: 100%;
			box-sizing: border-box;
			height: 60rpx;
			&.textarea{
				height: 240rpx;
				padding: 24rpx 0;
			}
		}
	
		.form-input-placeholder {		
			color: #999
		}
	
		&__button {
			width: 100%;
			height: 88rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			font-size: 36rpx;
			color: #fff;
			margin-top: 20rpx;
			background-color: #2D87D5;
	
			&::before,
			&::after {
				border: none;
			}
		}
	
		.customize-form-item {
			&__label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
			}
	
			&__radio {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
	
				&__text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
.expert-verify {
	min-height: 100vh;
	box-sizing: border-box;
	.verify-head {
		border-top: 2upx solid #F5F5F5;
		padding: 34upx 66upx 44upx 66upx;
		background-color: #FFFFFF;
		margin-bottom: 16upx;
		.title {
			text-align: center;
			margin-bottom: 24upx;
			image {
				width: 144upx;
				height: 44upx;
				margin: 0 auto;
			}
		}
		.verify-img {
			text-align: center;
			image {
				width: 606upx;
				height: 108upx;
				margin: 0 auto;
			}
		}
		.verify-text {
			display: flex;
			margin-top: 10upx;
			view {
				flex: 1;
				font-size:26upx;
				font-weight:400;
				color:rgba(52,103,196,1);
				line-height:36upx;
			}
			view:nth-child(2){
				text-align: center;
			}
			view:nth-child(3){
				text-align: right;
			}
		}
	}
	.verify {
		width: 100%;
		box-sizing: border-box;
		padding: 28upx 32upx 65upx 32upx;
		z-index:999;
		button {
			background:rgba(0,139,255,1);
			border-radius:10upx;
			font-size:34upx;
			height: 88upx;
			border-radius: 44upx;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
	}
}
.expert-text {
	position: relative;
	.text {
		width:336upx;
		height:76upx;
		font-size:24upx;
		font-weight:400;
		color:rgba(163,163,163,1);
		line-height:38upx;
		position: absolute;
		bottom: 10upx;
		left: 182upx;
	}
}
.session {
	border-bottom: 2upx solid #F5F5F5;
	padding-bottom: 34upx;
	padding: 0 26upx;
	.session-title {
		color: #666;
		line-height: 82upx;
		padding: 4upx 0upx;
	}
	.session-image {
		display: flex;
		
		view {
			width: 230upx;
			height: 140upx;
			margin-right: 44upx;
			position: relative;
			overflow: hidden;
			image {
				width: 230upx;
				height: 140upx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	.session-text {
		font-size:24upx;
		font-weight:400;
		color:rgba(163,163,163,1);
		line-height:46upx;
		margin-top: 12upx;
		margin-bottom: 32upx;
	}
}
</style>
